<template>
  <div>
    <dome1></dome1>
  </div>
  <div>
    <dome2></dome2>
  </div>
  <button @click="nums">{{num}}</button>
</template>

/*
* 使用typescript 的优点 进行一个规范（类型注解）
* ref 和 reactive 是为了数据响应式 如果直接return解构赋值的话就是普通的变量页面dom没有响应
* 这两个没有好坏之分 作用都是相同的 吧普通数据更改为响应式数据 根据自己的选择来写
* 如果传入ref 的是一个对象，将调用reactive 方法进行深层响应转换
*/

<script lang="ts">
import { ref , onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured, onRenderTracked, onRenderTriggered} from "vue";
import dome1 from "../components/dome1.vue";
import dome2 from "../components/dome2.vue";

export default {
  name: "home",
  components: {
    dome1,
    dome2,
  },
  setup(){
    console.log("1-开始创建组件，在beforeCreact 和 created 之前执行，创建的是data和method");
    const num = ref(1);
    const nums = ref(()=>{ num.value = num.value+1 })

    // 状态值监听钩子函数
    onRenderTracked((event)=>{
      console.log("状态跟踪钩子函数  在4-5中间执行，页面每一个状态值都会打印",event);
    })
    onRenderTriggered((event)=>{
      console.log(event,"在4之前执行,和上一个钩子函数的区别是，上一个会打印所有的状态值，这个只是会打印当前改变的状态值！");
    })
    // 生命周期钩子函数
    onBeforeMount(()=>{
      console.log("2-组件挂载到页面之前执行");
    })
    onMounted(()=>{
      console.log("3-页面挂载到页面之后执行");
    })
    onBeforeUpdate(()=>{
      console.log("4-组件更新之前执行");
    })
    onUpdated(()=>{
      console.log("5-组件更新之后执行");
    })
    onBeforeUnmount(()=>{
      console.log("组件卸载之前执行");
    })
    onUnmounted(()=>{
      console.log("组件卸载之后执行");
    })
    onActivated(()=>{
      console.log("在<keep-laive>中独有的构造函数 被激活时执行");
    })
    onDeactivated(()=>{
      console.log("A组件切换到B，A组件消失时执行");
    })
    onErrorCaptured(()=>{
      console.log("当捕获一个来自子孙组件的异常时激活钩子函数");
    })

  // 使用keep-alive组件 会将数据保留在内存中，比如我们不想每次看到同一个页面重新加载数据，就可以使用这个组件来解决
    return {
        num,
        nums
    }

  },

 
  

};
</script>